{{! corresponding files: commerce.php & commerce.json }}

{{#firstuse}}
{{! ****************************************************************************
{{
{{  SPECIAL FIRST USE SECTION WITH CONNECTION OPTIONS
{{
{{  ************************************************************************* }}
    <div class="alt callout usecolor4"><div class="callout-inner">
    	<div class="pure-u-1 pure-u-md-1-2">
    		<h3 class="firstuse-title">{{{copy_firstuse}}}</h3>
    	</div>
    	<div class="pure-u-1 pure-u-md-1-2">
    		<div class="browser-header"><span></span><span></span><span></span></div><!--brower-header-->
    		<img src="{{www_path}}/assets/images/firstuse/commerce_screen.jpg" alt="screenshot" />
    	</div>
    </div><!--callout-inner-->
    </div><!--callout-->

    <div class="callout">
        {{#all_services}}
            <div class="pure-u-1 pure-u-md-1-2">
                <div class="callout-inner">
                    {{#service_has_image}}<h3><a href="{{link}}" target="_blank"><img src="{{www_path}}/assets/images/settings/{{key}}.png" alt="{{name}}"/></a></h3>{{/service_has_image}}
                    <p>{{description}}</p>
                    <p><a href="{{link}}" target="_blank">{{link}}</a></p>
                    <a class="button fullwidth lightboxed" href="{{www_path}}/settings/connections/add/{{key}}">Add Connection</a>
                </div><!--callout-inner-->
            </div><!--pure-->
        {{/all_services}}
    </div><!--pure-->
{{/firstuse}}

{{^firstuse}}
{{! ****************************************************************************
{{
{{  NOT FIRST USE - SHOW ORDERS
{{
{{  ************************************************************************* }}
    <header>
        <div class="pure-u-1 pure-u-md-1-2">
            <h4 class="page-title">{{^has_orders}}{{copy_settings}}{{/has_orders}}{{#has_orders}}{{copy_orders}}{{/has_orders}}</h4>
            <h5 class="page-subtitle">{{#no_filter}}{{copy_subtitle_unfulfilled}}{{/no_filter}}{{#filter_week}}{{copy_subtitle_thisweek}}{{/filter_week}}{{#filter_all}}{{copy_subtitle_alltime}}{{/filter_all}}</h5>
        </div><!--pure-->

        {{! *************************************************************************
        {{
        {{  VIEW FILTER SELECTOR
        {{
        {{  ********************************************************************** }}
        <div class="pure-u-1 pure-u-md-1-2">
            <!--ul class="inline-subnav">
                <li><a {{#no_filter}}class="current" {{/no_filter}}href="{{www_path}}/commerce/">{{copy_unfulfilled}}</a></li>
                <li><a {{#filter_week}}class="current" {{/filter_week}}href="{{www_path}}/commerce/filter/week/">{{copy_this_week}}</a></li>
                <li><a {{#filter_all}}class="current" {{/filter_all}}href="{{www_path}}/commerce/filter/all/">{{copy_all_time}}</a></li>
            </ul-->
            <ul class="inline-subnav right">
                <li><a class="drawer-trigger" href="#"><span class="icon icon-wrench"></span> {{copy_view_commerce_settings}}</a></li>
            </ul><div class="selecta right">
          			<label for="order-filter">{{copy_filter_orders}}</label>
          			<select  id="order-filter" class="dropdown-nav">
                  <option value="{{www_path}}/commerce/" {{#no_filter}}selected{{/no_filter}}>{{copy_unfulfilled}}</option>
                  <option value="{{www_path}}/commerce/filter/week/" {{#filter_week}}selected{{/filter_week}}>{{copy_this_week}}</option>
                  <option value="{{www_path}}/commerce/filter/all/" {{#filter_all}}selected{{/filter_all}}>{{copy_all_time}}</option>
          			</select>
          	</div><!--selecta-->


            <!--div class="selecta">
            <label for="order-filter">Filter orders:</label>
            <select id="order-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">

                <option value="{{www_path}}/commerce/" {{#no_filter}}selected{{/no_filter}}>{{copy_unfulfilled}}</option>
                <option value="{{www_path}}/commerce/filter/week/" {{#filter_week}}selected{{/filter_week}}>{{copy_this_week}}</option>
                <option value="{{www_path}}/commerce/filter/all/" {{#filter_all}}selected{{/filter_all}}>{{copy_all_time}}</option>
            </select-->

        </div>
    </header>

    <div class="pure-u-1">
        {{#orders_recent}}
        {{! **********************************************************************
        {{
        {{  WE HAVE ORDERS, SO DISPLAY THEM IN A LIST
        {{
        {{  ******************************************************************* }}
            <ul class="commerce order">
                {{#orders_recent}}
                    {{^fulfilled}}
                    {{! *******************************************************************
                    {{
                    {{  UNFULFILLED ORDERS HAVE MORE DETAIL,
                    {{  LIST ITEMS FOR EASY PICK AND PULL
                    {{
                    {{  **************************************************************** }}
                        <li>
                            <div class="item unfulfilled">
                                <div class="pure-u-1 pure-u-md-1-4">
                                    <a class="order-number" href="{{www_path}}/commerce/orders/view/{{id}}"><strong>{{copy_order}} {{number}}{{#notes}} <span class="icon icon-paperclip"></span>{{/notes}}</strong></a>
                                </div><!--pure-->
                                <div class="pure-u-1 pure-u-md-1-4">
                                  <p class="ship-to"><strong>{{copy_ship_to}}</strong></p>
                                </div><!--pure-->
                                <div class="pure-u-1 pure-u-md-1-2">
                                    <a class="text-date" href="{{www_path}}/commerce/orders/view/{{id}}">{{date}}</a>
                                </div><!--pure-->
                                <div class="pure-u-1 pure-u-md-1-4">
                                    <div class="customer-details">
                                        <p class="customer-address">
                                            <strong>Customer:</strong><br/>
                                            <a class="customer-name" href="mailto:{{customer_email}}?subject=RE: {{copy_order}}{{number}} - {{order_description}}">{{customer_name}}</a>
                                        </p>
                                    </div><!--customer-details--></div><!--pure-->

                                <div class="pure-u-1 pure-u-md-1-4">
                                  <div class="customer-details">
                                    <p class="customer-address">
                                      {{customer_shipping_name}}<br/>
                                      {{customer_address1}}<br/>
                                      {{#customer_address2}}{{customer_address2}}<br/>{{/customer_address2}}
                                      {{customer_city}}, {{customer_region}} {{customer_postalcode}}<br />
                                      {{customer_country}}
                                    </p>
                                  </div><!--customer-details-->
                                </div><!--pure-->

                                <div class="pure-u-1 pure-u-md-1-2">
                                    <ul class="inventory">
                                        {{#order_contents}}
                                            <li>{{#qty}}{{qty}}{{/qty}}{{^qty}}1{{/qty}}x {{name}}{{#variant}} <span class="fadedtext">({{variant}})</span>{{/variant}}</li>
                                        {{/order_contents}}
                                    </ul><!--inventory-->
                                </div><!--pure-->
                                <hr />
                                <div class="pure-u-1 pure-u-md-1-2">
                                    {{#canceled}}
                                        <p>Refunded</p>
                                    {{/canceled}}
                                    {{^canceled}}
                                        <form accept-charset="UTF-8" method="post" action="{{www_path}}{{requested_route}}">
                                            <input type="hidden" name="fulfill" value="{{id}}" />
                                            <input type="submit" class="button" value="{{copy_fulfilled_button}}" />
                                        </form>
                                    {{/canceled}}
                                </div><!--pure-->

                                <div class="pure-u-1 pure-u-md-1-2">
                                    <h3 class="price fadedtext">{{copy_total}}{{gross}}{{#shipping}} <span class="shipping fadedtext">({{itemtotal}} + {{shipping}} {{copy_shipping}})</span>{{/shipping}}</h3>
                                </div><!--pure-->
                            </div><!--item-->
                        </li>
                    {{/fulfilled}}
                    {{#fulfilled}}
                    {{! *******************************************************************
                    {{
                    {{  FULFILLED ORDERS ARE A MORE CONDENSED VIEW
                    {{
                    {{  **************************************************************** }}
                        <li>
                            <div class="item complete">
                                <div class="fulfillment-marker">
                                    <div class="icon icon-tick"></div></div><!--fulfilled-->
                                <div class="pure-u-1 pure-u-md-1-3">
                                    <a class="order-number" href="{{www_path}}/commerce/orders/view/{{id}}"><strong>{{copy_order}} {{number}}{{#notes}} <span class="icon icon-paperclip"></span>{{/notes}}</strong></a></div><!--pure-->
                                <div class="pure-u-1 pure-u-md-2-3">
                                    <a class="text-date" href="{{www_path}}/commerce/orders/view/{{id}}">{{date}}</a>
                                </div><!--pure-->
                                <div class="pure-u-1 pure-u-md-1-3">
                                    <div class="customer-details">
                                        <a class="customer-name" href="mailto:{{customer_email}}?subject=RE: {{copy_order}}{{number}} - {{order_description}}">{{customer_name}}</a>
                                    </div><!--customer-details--></div><!--pure-->
                                <div class="pure-u-1 pure-u-md-1-3">
                                    <ul class="inventory">
                                        <li><span class="description">{{order_description}}</span><span class="fulfilled"> - <strong>{{copy_fulfilled}}</strong></span></li>
                                    </ul><!--inventory-->
                                </div><!--pure-->
                                <div class="pure-u-1 pure-u-md-1-3">
                                    <h3 class="price fadedtext">Total: {{gross}}{{#shipping}} <span class="shipping fadedtext">({{itemtotal}} + {{shipping}} {{copy_shipping}})</span>{{/shipping}}</h3>
                                </div><!--pure-->
                            </div><!--item-->
                        </li>
                    {{/fulfilled}}
                {{/orders_recent}}
            </ul>

            {{! **********************************************************************
            {{
            {{  PAGINATION NEXT/PREV BUTTONS IF NEEDED
            {{
            {{  ******************************************************************* }}
            {{#show_pagination}}<div class="left pagination {{^show_nextandprevious}}single-prev-next{{/show_nextandprevious}} {{#show_nextandprevious}}both-prev-next{{/show_nextandprevious}}">{{#show_previous}}<a class="prev" href="{{www_path}}/commerce/{{^back_to_first}}page/{{previous_page}}/{{/back_to_first}}{{^no_filter}}filter/{{filter_type}}/{{filter_item_id}}{{/no_filter}}">Previous</a>{{/show_previous}}{{#show_next}}<a class="next" href="{{www_path}}/commerce/page/{{next_page}}/{{^no_filter}}filter/{{filter_type}}/{{filter_item_id}}{{/no_filter}}">Next</a>{{/show_next}}</div><!--pagination-->{{/show_pagination}}
        {{/orders_recent}}

        {{^orders_recent}}
        {{! **********************************************************************
        {{
        {{  MESSAGE IF NO ORDERS ARE PRESENT THAT MATCH THE FILTER }}

        {{/orders_recent}}

        {{! **********************************************************************
        {{
        {{  SECTION SETTINGS PANEL
        {{
        {{  ******************************************************************* }}
        <div id="settings-drawer" class="drawer prefpanel multipart pure-u-1 {{^orders_recent}}open{{/orders_recent}}">
            <div class="itemnav pure-u-1">
              <div class="pure-u-1 pure-u-md-1-2">
                <h4 class="drawerhandle title"><div class="icon icon-wrench"></div><!--icon--><span>{{copy_commerce_settings}}</span></h4>
              </div>
                <div class="pure-u-1 pure-u-md-1-2">
                <ul class="page-settings-tabs">
                    <li>{{copy_sales_settings}}</li>
                    <li>{{copy_shipping_regions}}</li>
                </ul>
                  </div>
                <div class="drawercontent">
                         <div class="pref-inner">
                             <h5>{{copy_sales_settings}}</h5>
                             <form accept-charset="UTF-8" method="post" class="returntocurrentroute" action="{{www_path}}/commerce/">
                                 <div class="pure-u-1 pure-u-md-1-2">
                                     <label for="currency_id">{{label_primary_currency}}</label>
                                     <select id="currency_id" name="currency_id">{{{currency_options}}}</select>
                                 </div><!--pure-->
                                 <div class="pure-u-1 pure-u-md-1-2">
                                     <label for="paypal_default_id">{{label_default_paypal}}</label>
                                     <select id="paypal_default_id" name="paypal_default_id">{{{paypal_default_options}}}</select>
                                 </div><!--pure-->
                                 <div class="pure-u-1 pure-u-md-1-2">
                                     <label for="paypal_micropayment_id">{{label_micropayment_paypal}}</label>
                                     <select id="paypal_micropayment_id" name="paypal_micropayment_id">{{{paypal_micro_options}}}</select>
                                 </div><!--pure-->
                                 <div class="pure-u-1 pure-u-md-1-2">
                                     <label for="stripe_default">{{label_default_stripe}}</label>
                                     <select id="stripe_default" name="stripe_default">{{{stripe_options}}}</select>
                                 </div><!--pure-->
                                 <br />
                                 <button type="submit">{{copy_save_sales_settings}}</button>
                               </form>
                         </div><!--pref-inner-->

                     <div class="pure-u-1">
                         <div class="pref-inner">
                             <h5>{{copy_shipping_regions}}</h5>
                             <form accept-charset="UTF-8" method="post" class="returntocurrentroute" action="{{www_path}}/commerce/">
                                 <div class="pure-u-1 pure-u-md-1-2">
                                     <label for="region1">{{label_region_1}}</label>
                                     <input type="text" id="region1" name="region1" value="{{region1}}" placeholder="US" class="required" />
                                 </div><!--pure-->
                                 <div class="pure-u-1 pure-u-md-1-2">
                                     <label for="region2">{{label_region_2}}</label>
                                     <input type="text" id="region2" name="region2" value="{{region2}}" placeholder="Rest of world" class="required" />
                                 </div><!--pure-->
                                 <br />
                                 <button type="submit">{{copy_button_set_shipping_regions}}</button>
                                 </div><!--pref-inner-->
                             </form>
                     </div><!--pure-->
                </div><!--drawercontent-->
            </div><!--itemnav-->
        </div><!--drawer prefpanel-->

    </div><!--pure-->
{{/firstuse}}
